<template>
  <div>
    <!-- 未来一周气温变化 -->
    <div class="temp_week">
      <!-- 动态切换背景 -->
      <div style="
          width: 100%;
          height: 40px;
          display: flex;
          margin-bottom: 20px;
          justify-content: flex-start;
        ">
        <el-switch @click="switchColorMethod" v-model="switchColor" /><span
          style="margin-left: 10px; font-weight: bold">深色模式</span>
      </div>

      <div id="chinaEchart" style="width: 100%; height: 750px"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import echarts from "@/echart";
import uploadedDataURL from "@/assets/china.json";

const switchColor = ref(false);
onMounted(() => {
  initAssessTemp();
});

//动态切换背景颜色
function switchColorMethod() {
  initAssessTemp();
}

function initAssessTemp() {
  var assessChart = echarts.init(document.getElementById("chinaEchart"));

  echarts.registerMap("china", uploadedDataURL);

  var option = {
    title: {
      text: "热力图", //表头
      x: "center",
    },
    dataRange: {
      min: 0,
      max: 3000,
      text: ["高", "低"],
      realtime: true,
      calculable: true,
      color: ["darkred", "red", "orangered", "yellow"], //颜色
    },
    series: [
      {
        name: "热力图",
        type: "map",
        map: "china",
        zoom: 1.2,
        label: { show: true },
        itemSytle: {
          emphasis: { label: { show: true } },
        },
        data: [
          { name: "河北省", value: 101 },
          { name: "山西省", value: 412 },
          { name: "辽宁省", value: 201 },
          { name: "吉林省", value: 123 },
          { name: "黑龙江省", value: 45 },
          { name: "江苏省", value: 89 },
          { name: "浙江省", value: 236 },
          { name: "安徽省", value: 452 },
          { name: "福建省", value: 186 },
          { name: "江西省", value: 321 },
          { name: "山东省", value: 412 },
          { name: "河南省", value: 251 },
          { name: "湖北省", value: 150 },
          { name: "湖南省", value: 122 },
          { name: "广东省", value: 741 },
          { name: "海南省", value: 900 },
          { name: "四川省", value: 221 },
          { name: "贵州省", value: 453 },
          { name: "云南省", value: 300 },
          { name: "陕西省", value: 350 },
          { name: "甘肃省", value: 147 },
          { name: "青海省", value: 70 },
          { name: "台湾省", value: 258 },
          { name: "北京市", value: 301 },
          { name: "天津市", value: 128 },
          { name: "上海市", value: 642 },
          { name: "重庆市", value: 500 },
          { name: "内蒙古自治区", value: 60 },
          { name: "广西壮族自治区", value: 503 },
          { name: "西藏自治区", value: 200 },
          { name: "宁夏回族自治区", value: 423 },
          { name: "新疆维吾尔自治区", value: 239 },
          { name: "香港特别行政区", value: 200 },
          { name: "澳门特别行政区", value: 169 },
        ],
      },
    ],
  };

  if (switchColor.value) {
    assessChart.dispose();
    //黑色模式
    assessChart = echarts.init(document.getElementById("chinaEchart"), "dark");
    assessChart.setOption(option);
    //随着屏幕大小调节图表
    window.addEventListener("resize", () => {
      assessChart.resize();
    });
  } else {
    assessChart.dispose();
    //黑色模式
    assessChart = echarts.init(document.getElementById("chinaEchart"));
    assessChart.setOption(option);
    //随着屏幕大小调节图表
    window.addEventListener("resize", () => {
      assessChart.resize();
    });
  }
}
</script>


<style scoped>
.temp_week{
  padding: 20px;
}
</style>
